<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <META http-equiv=Content-Type content="text/html; charset=utf-8">
    <title>this的基本用法</title>
    <script type="text/javascript" src="/static/js/jquery-3.1.1.js"
            charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/handlebars-v4.0.2.js"
            charset="utf-8"></script>
</head>
<body>
<h1>this的基本用法</h1>
<!--基础html框架-->
<table>
    <thead>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody id="tableList">

    </tbody>
</table>

<!--插件引用-->
<!--Handlebars.js模版-->
<!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->
<!--id可以用来唯一确定一个模版,type是模版固定的写法-->
<script id="table-template" type="text/x-handlebars-template">
    {{#each this}}
    <tr>
        <td>{{name}}</td>
        <td>{{sex}}</td>
        <td>{{age}}</td>
    </tr>
    {{/each}}
</script>

<!--进行数据处理、html构造-->
<script type="text/javascript">
    $(document).ready(function () {//ready事件,当dom(文档对象模型)已经加载,并且页面(包括图像)已经完全呈现时,会发生ready事件
        //模拟json数据
        var data = [
            {
                name: "张三",
                sex: "0",
                age: 18
            },
            {
                name: "李四",
                sex: "0",
                age: 18
            },
            {
                name: "王五",
                sex: "1",
                age: 18
            }
        ];

        //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架
        //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。
        var myTemplate = Handlebars.compile($("#table-template").html());

        //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
        $('#tableList').html(myTemplate(data));
    });
</script>
</body>
</html>